<template>
	<scroll-view
		scroll-y 
		refresher-enabled
		lower-threshold="70"
		class="swiper-scroll" 
		@scrolltolower="onreachBottom"
		@refresherrefresh="handleRefresh"
		:refresher-triggered="isRefresh"
		refresher-default-style="white"
		>
		    <!-- 主要内容-->
			<view v-if="currentLength">
				<slot></slot>
			</view>
			
			<!-- 数据到底展示 -->
			<view v-if="total == currentLength">
				<noDataBottom></noDataBottom>
			</view>
			
			<!-- 空数据展示 -->
			<view class="b-no-data" v-if="!currentLength">
				<noData b-style="background-color: transparents;"/>
			</view>
		</scroll-view>
</template>

<script>
	import noData from '@/components/noData/noData'
	import noDataBottom from '@/components/noDataBottom/noDataBottom'
	export default {
		components: {
			noData,
			noDataBottom
		},
		props: {
			isRefresh: {
				type: Boolean,
				default: () => true
			},
			/**
			 * 数量总量，无数据时可做其它操作
			 */
			total: {
				default: () => 0
			},
		    /**
			 * 当前Length
			 */
			currentLength: {
				default: () => 5
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			/**
			 * 到底部触发
			 */
			onreachBottom() {
				this.$emit('scrolltolower', {})
			},
			
			/**
			 * 下拉刷新
			 */
			handleRefresh() {
				this.$emit('refresherrefresh', {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-scroll {
		width: 100%;
		height: 100%;
		.b-no-data {
			height: 100%;
		}
	}
</style>
